import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QtQuick.LocalStorage 2.0

import "main.js" as Main;

Window {
    visible: true
    minimumHeight: Main.height;
    minimumWidth: Main.width;
    maximumHeight: Main.height;
    maximumWidth: Main.width;

    property int ratingIndex: 0;

    Item{
        id: loginContent;
        Image { width: Main.width; height: Main.height; source: "resources/login.png"; z: -1; }
        Image { width: 250; height: 250; x: Main.width / 2 - 125; y: 50; z: 1; source: "resources/logo.png"; }
        TextField { id: txtLoginName; width: 200; height: 25; z: 1; x: Main.width / 2 - 100; y: 345; placeholderText: qsTr("Loginname"); }
        TextField { id: txtPassword; echoMode: TextInput.Password; width: 200; height: 25; z: 1; x: Main.width / 2 - 100; y: 400; placeholderText: qsTr("Password"); }
        Rectangle { width: 100; height: 25; z: 1; x: Main.width / 2 - 50; y: 450;
            Text { anchors.centerIn: parent; text: qsTr("Login"); }
            MouseArea{ id: btnLogin; anchors.fill: parent;
                onClicked: {
                    var loginName = txtLoginName.text;
                    var password = txtPassword.text;
                    if(Main.login(loginName, password)){
                        var db = LocalStorage.openDatabaseSync("ourcooking", "1.0", "ourcooking database", 1000000);
                        db.transaction(
                            function(tx){
                                tx.executeSql("CREATE TABLE IF NOT EXISTS user(loginName TEXT, password TEXT)");
                                tx.executeSql("DELETE FROM user");
                                tx.executeSql("INSERT INTO user VALUES(?,?)", [loginName, password]);
                            }
                        );
                    }
                }
            }
            Component.onCompleted: {
                var db = LocalStorage.openDatabaseSync("ourcooking", "1.0", "ourcooking database", 1000000);
                db.transaction(
                    function(tx){
                        var rs = tx.executeSql("SELECT * FROM user");
                        var loginName = "";
                        var password = "";
                        for(var i = 0; i < rs.rows.length; i++){
                            loginName = rs.rows.item(i).loginName;
                            password = rs.rows.item(i).password;
                        }
                        if(!(loginName === "")){
                            Main.login(loginName, password);
                        }
                    }
                );
            }
        }
        Text { id: txtError; width: 200; y: 500; x: Main.width / 2 - 100; }
    }

    TabView { id: tabWidget; visible: false; width: Main.width; height: Main.height; anchors.fill: parent;
        Tab { id: streamTab; title: "Stream"; anchors.top: parent.top; component: tabStream;
            onVisibleChanged: {
                if(visible){
                    Main.showStream("Date");
                }
            }
        }
        Tab { id: favouritesTab; title: "Favourites"; anchors.top: parent.top; component: tabFavourites;
            onVisibleChanged: {
                if(visible){
                    Main.showFavourites();
                }
            }
        }
        Tab { title: "Filter"; anchors.top: parent.top; component: tabFilter;
            onFocusChanged: {
                if(visible){

                }
            }
        }
        style: TabViewStyle {
            tab: Rectangle { color: "#86C6E0"; border.width: 1; implicitWidth: Main.tabWidth; implicitHeight: Main.tabHeight;
                Text { font.pixelSize: Main.tabHeight / 3;  anchors.centerIn: parent; id: text; text: styleData.title; }
            }
        }
    }
    ListModel { id: stream_model; }
    ListModel { id: favourites_model; }
    ListModel { id: mdlFriendList; }
    Component {
        id: tabStream;
        Item {
            Image{ width: Main.width; height: Main.height; source: "resources/bg.png"; z: -1; }
            Rectangle{ x:50; id: rectSorting; width: Main.width; height: 15; color: "transparent"; y: 40;
                Text{ width: 50; height: 15; text: "Sorting: "}
                ComboBox { x: 100; width: 200;
                    model: ListModel{ id: lstSorting;
                        ListElement{ text: "Date" }
                        ListElement{ text: "CountClicks" }
                        ListElement{ text: "Rating" }
                        ListElement{ text: "Duration" }
                    }
                    onCurrentIndexChanged: {
                        if(Main.filter){
                            Main.doFilter(lstSorting.get(currentIndex).text);
                        } else {
                            Main.showStream(lstSorting.get(currentIndex).text);
                        }
                    }
                }
            }
            ListView { id: streamList; width: Main.width; y: Main.tabHeight + 50; height: Main.height / 2 + 80; model: stream_model; spacing: 10;
                delegate: Rectangle{ color: "transparent"; width: Main.width; height: 90;
                    Image { width: 150; height: 90; source: recImage }

                    Text { y: 5; x: 160; width: Main.width - 100; height: 25; text: name; }
                    Text { x: 160; y: 30; width: Main.width - 100; height: 15; text: description; }

                    Image { x: 160; y: 45; width: 20; height: 20; source: star1; }
                    Image { x: 180; y: 45; width: 20; height: 20; source: star2; }
                    Image { x: 200; y: 45; width: 20; height: 20; source: star3; }
                    Image { x: 220; y: 45; width: 20; height: 20; source: star4; }
                    Image { x: 240; y: 45; width: 20; height: 20; source: star5; }

                    Text { x: 280; y: 45; width: 50; height: 15; text: "Duration"; }
                    Text { x: 340; y: 45; width: 50; height: 15; text: duration; }

                    Text { x: 160; y: 65; width: 50; height: 15; text: "Clicks"; }
                    Text { x: 220; y: 65; width: 50; height: 15; text: countClicks; }

                    Text { x: 280; y: 65; width: 50; height: 15; text: "Effort"; }
                    Text { x: 340; y: 65; width: 50; height: 15; text: effort; }

                    Rectangle{ color: "#FFFFFF"; width: Main.width - 120; height: 2; x: 160; y: 85; }
                    MouseArea{ anchors.fill: parent;
                        onClicked: {
                            receiptDetail.visible = true;
                            tabWidget.visible = false;
                            Main.initReceipt(id);
                        }
                    }
                }
            }
        }
    }
    Component {
        id: tabFavourites;
        Item {
            Image{ width: Main.width; height: Main.height; source: "resources/bg.png"; z: -1; }
            ListView { id: favList; width: Main.width; y: Main.tabHeight + 50; height: contentHeight; model: favourites_model; spacing: 10;
                delegate: Rectangle{ color: "transparent"; width: Main.width; height: 90;

                    Image { width: 150; height: 90; source: recImage }

                    Text { y: 5; x: 160; width: Main.width - 100; height: 25; text: name; }
                    Text { x: 160; y: 30; width: Main.width - 100; height: 15; text: description; }

                    Image { x: 160; y: 45; width: 20; height: 20; source: star1; }
                    Image { x: 180; y: 45; width: 20; height: 20; source: star2; }
                    Image { x: 200; y: 45; width: 20; height: 20; source: star3; }
                    Image { x: 220; y: 45; width: 20; height: 20; source: star4; }
                    Image { x: 240; y: 45; width: 20; height: 20; source: star5; }

                    Text { x: 280; y: 45; width: 50; height: 15; text: "Duration"; }
                    Text { x: 340; y: 45; width: 50; height: 15; text: duration; }

                    Text { x: 160; y: 65; width: 50; height: 15; text: "Clicks"; }
                    Text { x: 220; y: 65; width: 50; height: 15; text: countClicks; }

                    Text { x: 280; y: 65; width: 50; height: 15; text: "Effort"; }
                    Text { x: 340; y: 65; width: 50; height: 15; text: effort; }

                    Rectangle{ color: "#FFFFFF"; width: Main.width - 120; height: 2; x: 160; y: 85; }
                    MouseArea{ anchors.fill: parent;
                        onClicked: {
                            Main.initReceipt(id);
                            receiptDetail.visible = true;
                            tabWidget.visible = false;
                        }
                    }
                }
            }
        }
    }
    Component {
        id: tabFilter;
        Item { height: Main.height; anchors.fill: parent; x: 5; width: Main.width;
            Image{ width: Main.width; height: Main.height; source: "resources/bg.png"; z: -1; }
            Item{ id: filterIngContainer; y: 20;
                Text { text: "Ingredients"; x: 5; width: 50; height: 25; }
                Item { id: fic1; x:110;
                    ComboBox { id: cbFilterIngredient; width: 150; height: 25;
                        model: ListModel { id: cbFIng1; }
                        onCurrentIndexChanged: Main.addFilterIngredient(currentIndex, 0, filterReceipt);
                    }
                }
                Item { id: fic2; visible: false; x:110;
                    ComboBox { y: 40; width: 150; height: 25;
                        model: ListModel { id: cbFIng2; }
                        onCurrentIndexChanged: Main.addFilterIngredient(currentIndex, 1, filterReceipt);
                    }
                }
                Item { id: fic3; visible: false; x:110;
                    ComboBox { y: 80; width: 150; height: 25;
                        model: ListModel { id: cbFIng3; }
                        onCurrentIndexChanged: Main.addFilterIngredient(currentIndex, 2, filterReceipt);
                    }
                }
                Component.onCompleted: Main.showFilter(fic1, fic2, fic3, cbFIng1, cbFIng2, cbFIng3, filterReceiptName, filterUserName);
            }
            Item { id: filterReceipt; y: 60;
                Text { width: 100; height: 25; x: 5; text: qsTr("Name: "); }
                TextField { id: filterReceiptName; width: 200; height: 25; x: 110; }
                Text { width: 100; height: 25; x: 5; text: qsTr("Username: "); y:40; }
                TextField { id: filterUserName; width: 200; height: 25; x: 110; y: 40; }
                Rectangle { color: "#94A4C4"; x: Main.width/2 - Main.menuWidth/4; y: 100; width: Main.menuWidth/2; height: Main.menuHeight;
                    Text { text: qsTr("filter"); anchors.centerIn: parent; font.pointSize: Main.menuHeight / 2; }
                    MouseArea {
                        anchors.fill: parent;
                        onClicked: {
                            tabWidget.currentIndex = 0;
                            Main.doFilter("Date");
                        }
                    }
                }
            }
        }
    }

    ScrollView { height: Main.height - Main.menuHeight; anchors.fill: parent; id: receiptDetail; visible: false;
        Item { anchors.fill: parent;
            Image { width: Main.width; height: Main.height; source: "resources/bg.png"; z: -1; }

            Image { y: 5; x: 5; id: imgReceipt; width: 260; height: 150; z: 10; }

            Text { width: 100; height: 15; x: 290; y: 20; text: qsTr("Duration"); }
            Text { id: receiptDuration; width: 100; height: 15; x: 370; y: 20; }

            Text { width: 100; height: 15; x: 290; y: 40; text: qsTr("Effort"); }
            Text { id: receiptEffort; width: 100; height: 15; x: 370; y: 40; }

            Text { width: 100; height: 15; x: 290; y: 60; text: qsTr("Date"); }
            Text { id: receiptDate; width: 100; height: 15; x: 370; y: 60; }

            Text { width: 100; height: 15; x: 290; y: 80; text: qsTr("Clicks"); }
            Text { id: receiptClicks; width: 100; height: 15; x: 370; y: 80; }

            Text { width: 100; height: 15; x: 290; y: 100; text: qsTr("Username"); }
            Text { font.underline: true; id: receiptUsername; width: 100; height: 15; x: 370; y: 100;
                MouseArea { anchors.fill: parent;
                    onClicked: {
                        Main.addToFriendList();
                    }
                }
            }

            ComboBox { id: cbRating; width: 50; height: 20; x: 290; y: 120;
                model: ListModel{ id: lstRating;
                    ListElement{ text: "0.0" }
                    ListElement{ text: "0.5" }
                    ListElement{ text: "1.0" }
                    ListElement{ text: "1.5" }
                    ListElement{ text: "2.0" }
                    ListElement{ text: "2.5" }
                    ListElement{ text: "3.0" }
                    ListElement{ text: "3.5" }
                    ListElement{ text: "4.0" }
                    ListElement{ text: "4.5" }
                    ListElement{ text: "5.0" }
                }
                onCurrentIndexChanged: ratingIndex = currentIndex;
            }
            Rectangle { width: 50; height: 15; x: 370; y: 120; Text { anchors.centerIn: parent; text: qsTr("rate") }
                MouseArea { anchors.fill: parent;
                    onClicked: {
                        Main.rate(lstRating.get(ratingIndex).text);
                        cbRating.currentIndex = 0;
                    }
                }
            }

            Text { x: 5; width: Main.width - 150; height: 30; id: receiptName; y: 170; }
            Image { width: 20; height: 20; id: star1; y: 170; x: Main.width - 110; }
            Image { width: 20; height: 20; id: star2; y: 170; x: Main.width - 90; }
            Image { width: 20; height: 20; id: star3; y: 170; x: Main.width - 70; }
            Image { width: 20; height: 20; id: star4; y: 170; x: Main.width - 50; }
            Image { width: 20; height: 20; id: star5; y: 170; x: Main.width - 30; }

            Text { x: 5; width: Main.width - 150; height: 25; id: receiptDescription; y: 200; }
            Rectangle { y: 230; width: Main.width - 10; x: 5; height: 2; color: "#94A4C4"; }

            Text { x: 5; width: Main.width; height: 30; y: 250; text: qsTr("Ingredients") }
            Item { x: 5; id: detailIngredients; width: Main.width; y: 280; }
            Rectangle { id: sep1; width: Main.width - 10; x: 5; height: 2; color: "#94A4C4"; }

            Text { x: 5; id: lblStep; width: Main.width; height: 30; text: qsTr("Steps") }
            Item { x: 5; id: steps; width: Main.width; }
            Rectangle { id: sep2; width: Main.width - 10; x: 5; height: 2; color: "#94A4C4"; }

            Text { x: 5; id: lblComment; width: Main.width; height: 30; text: qsTr("Comments") }
            Item { x: 5; id: comments; width: Main.width; }
            Rectangle { id: sep3; width: Main.width - 10; x: 5; height: 2; color: "#94A4C4"; }

            TextField{ id: txtComment; width: Main.width - 25; height: 25; x: 5; placeholderText: "comment"; }
            Rectangle { id: addComment; x: Main.width / 2 - Main.menuWidth / 2; width: Main.menuWidth; height: Main.menuHeight; border.width: 1; color: "#7BADB1";
                Text { id: btnAddComment; font.pixelSize: Main.menuHeight / 2; text: "add comment"; anchors.centerIn: parent; }
                MouseArea{ anchors.fill: parent; onClicked: { Main.btnAddComment(txtComment.text); }}
            }

            Rectangle { id: addFavourite; x: Main.width / 2 - Main.menuWidth / 2; width: Main.menuWidth; height: Main.menuHeight; border.width: 1; color: "#7BADB1";
                Text { id: btnAddFavourite; font.pixelSize: Main.menuHeight / 2; anchors.centerIn: parent; }
                MouseArea{ anchors.fill: parent; onClicked: { Main.btnFavourite(); }}
            }
        }
    }
    ScrollView { height: Main.height - Main.menuHeight; anchors.fill: parent; visible: false; id: addReceipt;
        Item {
            anchors.fill: parent;
            Image { width: Main.width; height: Main.height; source: "resources/bg.png"; z: -1; }

            Image { x: 5; id: addImgReceipt; width: 260; height: 150; z: 10; }

            Text { width: 80; height: 25; x: 270; y: 25; text: qsTr("Duration"); }
            TextField { id: addReceiptDuration; width: 70; height: 25; x: 360; y: 20; }

            Text { width: 100; height: 25; x: 270; y: 60; text: qsTr("Effort"); }
            ComboBox { id: cbEffort; x: 360; y: 60; width: 100; height: 20;
                model: ListModel{ id: addLstEffort;
                    ListElement{ text: "very simple" }
                    ListElement{ text: "simple" }
                    ListElement{ text: "hard" }
                    ListElement{ text: "very hard" }
                    ListElement{ text: "chef" }
                }
                onCurrentIndexChanged: {
                    Main.effort = addLstEffort.get(currentIndex).text;
                }
            }

            Text { width: 100; height: 25; x: 5; y: 165; text: qsTr("Name: "); }
            TextField { id: addReceiptName; width: 300; height: 25; x: 110; y: 160; }

            Text { width: 100; height: 25; x: 5; y: 195; text: qsTr("Description: "); }
            TextField { id: addReceiptDescription; width: 300; height: 25; x: 110; y: 190; }
            Rectangle { y: 220; width: Main.width - 10; x: 5; height: 2; color: "#94A4C4"; }


            Text { x: 5; width: Main.width; height: 30; y: 230; text: qsTr("Ingredients") }
            Item { x: 5; id: addReceiptIngredients; width: Main.width; y: 250;
                Item { id: ingContainer1;
                    ComboBox { id: cbIngredient; x:5; width: 150; height: 25;
                        model: ListModel { id: addIngredient1; }
                        onCurrentIndexChanged: Main.addIngredient(currentIndex, 1);
                    }
                    TextField { id: ingAmount1; x: 170; width: 70; height: 25; }
                    Text { id: txtTypeOfAmount1; x: 260; width: 30; height: 25; }
                }

                Item { id: ingContainer2; visible: false;
                    ComboBox { y: 40; x:5; width: 150; height: 25;
                        model: ListModel { id: addIngredient2; }
                        onCurrentIndexChanged: Main.addIngredient(currentIndex, 2);
                    }
                    TextField { id: ingAmount2; y: 40; x: 170; width: 70; height: 25; }
                    Text { id: txtTypeOfAmount2; y: 40; x: 260; width: 30; height: 25; }
                }

                Item { id: ingContainer3; visible: false;
                    ComboBox { y: 80; x:5; width: 150; height: 25;
                        model: ListModel { id: addIngredient3; }
                        onCurrentIndexChanged: Main.addIngredient(currentIndex, 3);
                    }
                    TextField { id: ingAmount3; y: 80; x: 170; width: 70; height: 25; }
                    Text { id: txtTypeOfAmount3; y: 80; x: 260; width: 30; height: 25; }
                }

                Item { id: ingContainer4; visible: false;
                    ComboBox { y: 120; x:5; width: 150; height: 25;
                        model: ListModel { id: addIngredient4; }
                        onCurrentIndexChanged: Main.addIngredient(currentIndex, 4);
                    }
                    TextField { id: ingAmount4; y: 120; x: 170; width: 70; height: 25; }
                    Text { id: txtTypeOfAmount4; y: 120; x: 260; width: 30; height: 25; }
                }

                Item { id: ingContainer5; visible: false;
                    ComboBox { y: 160; x:5; width: 150; height: 25;
                        model: ListModel { id: addIngredient5; }
                        onCurrentIndexChanged: Main.addIngredient(currentIndex, 5);
                    }
                    TextField { id: ingAmount5; y: 160; x: 170; width: 70; height: 25; }
                    Text { id: txtTypeOfAmount5; y: 160; x: 260; width: 30; height: 25; }
                }

                Item { id: ingContainer6; visible: false;
                    ComboBox { y: 200; x:5; width: 150; height: 25;
                        model: ListModel { id: addIngredient6; }
                        onCurrentIndexChanged: Main.addIngredient(currentIndex, 6);
                    }
                    TextField { id: ingAmount6; y: 200; x: 170; width: 70; height: 25; }
                    Text { id: txtTypeOfAmount6; y: 200; x: 260; width: 30; height: 25; }
                }

            }
            Rectangle { id: addSepIngredient; y:300;  width: Main.width - 10; x: 5; height: 2; color: "#94A4C4"; }

            Item { x: 5; y: 310; id: addReceiptSteps; width: Main.width; height: Main.height;
                Text { x: 5; id: addLblStep; width: 100; height: 30; text: qsTr("Steps") }
                Rectangle { id: addingStep; x: 120; width: 70; height: 30;
                    Text { text: qsTr("add step"); anchors.centerIn: parent; }
                    MouseArea { anchors.fill: parent;
                        onClicked: {
                            Main.addStep();
                        }
                    }
                }
                Item { x:5; y: 40; id: addReceiptStepsContainer;
                    Text { x:5; id: addStep1; width: 50; height: 30; text: "Step 1" }
                    TextField { id: txtStep1; width: 350; height: 30; x: 60; }
                }
            }
            Rectangle { y: 420; id: addSepSteps; width: Main.width - 10; x: 5; height: 2; color: "#94A4C4"; }
            Rectangle { y: 440; id: btnAddReceipt; x: 120; width: 100; height: 30;
                Text { text: qsTr("add receipt"); anchors.centerIn: parent; }
                MouseArea { anchors.fill: parent;
                    onClicked: {
                        Main.addReceipt();
                    }
                }
            }
        }
    }
    ScrollView { height: Main.height - Main.menuHeight; anchors.fill: parent; visible: false; id: friendlist;
        Item {
            anchors.fill: parent;
            Image { width: Main.width; height: Main.height; source: "resources/bg.png"; z: -1; }
            ListView { id: lstFriendList; model: mdlFriendList; width: Main.width; height: Main.height / 2 + 80; spacing: 10;
                delegate: Rectangle { height: 30;
                    Text { x: 10; height:20; width: 100; text: loginName; y: 20; }
                    Rectangle{ color: "#FFFFFF"; width: Main.width - 20; height: 2; x: 10; y: 40; }
                }
            }
        }
    }

    Item { id: toggleMenu; z: 10;
        Rectangle { x: Main.width / 2 - Main.menuWidth / 2; y: Main.height - Main.menuHeight * 1; width: Main.menuWidth; height: Main.menuHeight; border.width: 1; color: "#94A4C4";
            Text { font.pixelSize: Main.menuHeight / 2; anchors.centerIn: parent; text: qsTr("Open Menu"); }
            MouseArea { anchors.fill: parent;
                onClicked: {
                    if(Main.chosenReceipt){
                        backMenu.visible = true;
                    } else if(addReceipt.visible){
                        backMenu.visible = true;
                    } else if(friendlist.visible){
                        backMenu.visible = true;
                    } else if(Main.currentUser){
                        menu.visible = true;
                    } else {
                        quitMenu.visible = true;
                    }

                }
            }
        }
    }
    Item { id: quitMenu; visible: false; z: 10;
        Rectangle { x: Main.width / 2 - Main.menuWidth / 2; y: Main.height - Main.menuHeight * 1; width: Main.menuWidth; height: Main.menuHeight; color: "#94A4C4"; border.width: 1;
            Text { font.pixelSize: Main.menuHeight / 2; anchors.centerIn: parent; text: qsTr("Close Menu"); }
            MouseArea { anchors.fill: parent;
                onClicked: {
                    quitMenu.visible = false;
                    toggleMenu.visible = true;
                }
            }
        }
        Rectangle {
            x: Main.width / 2 - Main.menuWidth / 2;
            y: Main.height - Main.menuHeight * 2;
            width: Main.menuWidth;
            height: Main.menuHeight;
            border.width: 1;
            Text {
                font.pixelSize: Main.menuHeight / 2;
                anchors.centerIn: parent;
                text: qsTr("Quit")
            }
            MouseArea {
                anchors.fill: parent;
                onClicked: { Qt.quit(); }
            }
        }
    }
    Item { id: menu; visible: false; z: 10;
        Rectangle { x: Main.width / 2 - Main.menuWidth / 2; y: Main.height - Main.menuHeight * 1; width: Main.menuWidth; height: Main.menuHeight; border.width: 1; color: "#94A4C4";
            Text { font.pixelSize: Main.menuHeight / 2; anchors.centerIn: parent; text: qsTr("Close Menu"); }
            MouseArea { anchors.fill: parent;
                onClicked: {
                    menu.visible = false;
                    toggleMenu.visible = true;
                }
            }
        }
        Rectangle { x: Main.width / 2 - Main.menuWidth / 2; y: Main.height - Main.menuHeight * 2; width: Main.menuWidth; height: Main.menuHeight; border.width: 1;
            Text { font.pixelSize: Main.menuHeight / 2; anchors.centerIn: parent; text: qsTr("Quit"); }
            MouseArea { anchors.fill: parent;
                onClicked: { Qt.quit(); }
            }
        }
        Rectangle { x: Main.width / 2 - Main.menuWidth / 2; y: Main.height - Main.menuHeight * 3; width: Main.menuWidth; height: Main.menuHeight; border.width: 1;
            Text { font.pixelSize: Main.menuHeight / 2; anchors.centerIn: parent; text: qsTr("logout"); }
            MouseArea { anchors.fill: parent;
                onClicked: {
                    var db = LocalStorage.openDatabaseSync("ourcooking", "1.0", "ourcooking database", 1000000);
                    db.transaction(
                        function(tx){
                            tx.executeSql("DELETE FROM user");
                        }
                    );
                    menu.visible = false;
                    Main.logout();
                }
            }
        }
        Rectangle { x: Main.width / 2 - Main.menuWidth / 2; y: Main.height - Main.menuHeight * 4; width: Main.menuWidth; height: Main.menuHeight; border.width: 1;
            Text { font.pixelSize: Main.menuHeight / 2; anchors.centerIn: parent; text: qsTr("Friendlist"); }
            MouseArea { anchors.fill: parent;
                onClicked: {
                    menu.visible = false;
                    tabWidget.visible = false;
                    friendlist.visible = true;
                    Main.initFriendList();
                }
            }
        }
        Rectangle { x: Main.width / 2 - Main.menuWidth / 2; y: Main.height - Main.menuHeight * 5; width: Main.menuWidth; height: Main.menuHeight; border.width: 1;
            Text { font.pixelSize: Main.menuHeight / 2; anchors.centerIn: parent; text: qsTr("Add receipt"); }
            MouseArea { anchors.fill: parent;
                onClicked: {
                    menu.visible = false;
                    tabWidget.visible = false;
                    addReceipt.visible = true;
                    Main.initIngredients();
                }
            }
        }

    }
    Item { id: backMenu; visible: false; z: 10;
        Rectangle { x: Main.width / 2 - Main.menuWidth / 2; y: Main.height - Main.menuHeight * 1; width: Main.menuWidth; height: Main.menuHeight; color: "#94A4C4"; border.width: 1;
            Text { font.pixelSize: Main.menuHeight / 2; anchors.centerIn: parent; text: qsTr("Close Menu"); }
            MouseArea { anchors.fill: parent;
                onClicked: {
                    quitMenu.visible = false;
                    toggleMenu.visible = true;
                }
            }
        }
        Rectangle { x: Main.width / 2 - Main.menuWidth / 2; y: Main.height - Main.menuHeight * 2; width: Main.menuWidth; height: Main.menuHeight; border.width: 1;
            Text { font.pixelSize: Main.menuHeight / 2; anchors.centerIn: parent; text: qsTr("Back"); }
            MouseArea { anchors.fill: parent;
                onClicked: {
                    Main.chosenReceipt = null;
                    receiptDetail.visible = false;
                    toggleMenu.visible = true;
                    tabWidget.visible = true;
                    backMenu.visible = false;
                    addReceipt.visible = false;
                    friendlist.visible = false;
                    Main.showStream("Date");
                }
            }
        }
    }
}
